<template>
  <div class="w-hui">
    <!-- 头部 -->
    <div class="w-header">
      <div class="w-xhead">
        <i></i>
        <span>个人中心</span>
        <i></i>
        <i></i>

      </div>
    </div>
    <!-- 遮罩2 -->
    <div class="wly" v-show="!bol">
    <!-- 中间 -->
        <div class="w-m" v-show="!bol">
            <div class="w-main">
            <!--==1 -->
            <div class="w-maintop">
                <div class="w-img"> 
                    <span></span>
                    <span @click="wlogin()">登录/注册</span>
                </div>
                <div class="with">
                账户提现
                </div>
            </div>
            
            </div>
            <!-- ==2 -->
            <div class="w-ding clearfix">
                <div>我的订单</div>
                <div>查看所有订单 ></div>
            </div>
            <!-- ==3 -->
            <div class="w-dfh">
                <ul>
                <li v-for="v1 in arr1" :key="'ind1'+v1"><i></i><span>{{v1}}</span></li>
                </ul>
            </div>
            <!-- ==4 -->
            <div class="w-mony">
                <div class="w-ding">
                <div>我的反金号</div>
                <div>查看更多 ></div>
                </div>
                <div class="w-mxin" v-show="bol">
                <ul>
                    <li v-for="(tmp,b1) in obj1" :key="b1">
                    <span>{{tmp.t}}</span>
                    <span>消费：￥{{tmp.f}}</span>
                    <span>排号：{{tmp.h}}</span>
                    </li>
                    <li v-for="tmp in obj1" :key="tmp">
                    <span>{{tmp.t}}</span>
                    <span>消费：￥{{tmp.f}}</span>
                    <span>排号：{{tmp.h}}</span>
                    </li>
                    <li v-for="tmp in obj1" :key="tmp">
                    <span>{{tmp.t}}</span>
                    <span>消费：￥{{tmp.f}}</span>
                    <span>排号：{{tmp.h}}</span>
                    </li>
                    <li v-for="tmp in obj1" :key="tmp"> 
                    <span>{{tmp.t}}</span>
                    <span>消费：￥{{tmp.f}}</span>
                    <span>排号：{{tmp.h}}</span>
                    </li>
                </ul>
                </div>
            </div>
            <div class="w-rzheng">
                <ul>
                <li v-for="v3 in arr3" :key="'ind2'+v3">
                    <span></span>
                    <div>{{v3}}</div>
                </li>
                </ul>
            </div>
        </div>
    <!-- 底部 -->
        <div class="w-footer">
        <div class="w-xfoot" >
            <ul>
                <li :class="{'w-list1':!fot[0],'w-list2':fot[0]}">
                <i></i><span>首页</span>
                </li>
                <li  :class="{'w-list1':!fot[1],'w-list2':fot[1]}">
                <i></i><span>分类</span>
                </li>
                <li  :class="{'w-list1':!fot[2],'w-list2':fot[2]}">
                <em></em>
                </li>
                <li  :class="{'w-list1':!fot[3],'w-list2':fot[3]}">
                <i></i><span>购物车</span>
                </li>
                <li  :class="{'w-list1':fot[4],'w-list2':!fot[4]}">
                <i></i><span>个人中心</span>
                </li>
            </ul>
        </div>
        </div>
    </div>

    <!-- 登录弹框 -->
    <div class="wZhezhao"> 
        <div class="wTanLogin">
            <i @click="gotolink()"></i>
            <div @click="wlogin()">登录</div>
            <div @click="reg()">注册</div>
        </div>
    </div>
    <!-- 遮罩3 -->
    <div class="wZhe" v-show="boo">
        <div class="wbox">
            <!-- 快速登录 -->
            <div class="wtit" v-show="bol1">
                <div class="wtitle" >
                    <span :class="ide1==1?'wtitc1':''" v-for="(v2,ide1) in arr4" :key="'ind3'+v2" @click="wBtn1(ide1)">{{v2}}</span>
                </div>
                <h3 class="wh3">新用户首次登录自动注册阿拉灯账号</h3>
                <div class="winput">
                    <div class="winput1">
                        <i></i>
                        <input type="text" placeholder="请输入手机号" @input="wphone(phone)" v-model="phone">
                        <em @click="xiao()"></em>
                    </div>
                    <div class="winput2">
                        <i></i>
                        <input type="text" placeholder="请输入手机验证码">
                        <a href="###" :class="{'wbian1':msg,'wbian2':!msg}" @click="wyan(phone)">获取验证码</a>
                    </div>
                </div>
                <div class="w-btn">
                    <span class="w-btn1" @click="end()">取消</span>
                    <span class="w-btn2">登录</span>
                </div>

            </div>

            <!-- 密码登录 -->
            <div class="wtit" v-show="bol2">
                <div v-show="inta1">
                    <div class="wtitle" >
                        <span :class="ind2==1?'wtitc1':''" v-for="(v3,ind2) in arr6" :key="v3" @click="wBtn2(ind2)">{{v3}}</span>
                    </div>
                    <h3 class="wh3y"></h3>
                    <div class="winput">
                        <div class="winput1">
                            <i></i>
                            <input type="text" placeholder="请输入手机号" @input="wphone(ph3)" v-model="ph1">
                            <em @click="xiao()"></em>
                        </div>
                        <div class="winput3" >
                            <i></i>
                            <input type="password" placeholder="请输入密码" v-model="pwd2">
                        </div>
                            <div class="w-int">
                                <a class="w-inta" href="###" @click="inta()">忘记密码？</a>
                            </div>
                    </div>
                    <div class="w-btn">
                        <span class="w-btn1" @click="end()">取消</span>
                        <span class="w-btn2" @click="log3()">登录</span>
                    </div>
                </div>
                <!-- 忘记密码 -->
                <div v-show="inta2">
                    <div class="wtitle" >
                        <span class="wtitc1">
                            <i class="back" @click="xxx()"></i>忘记密码<i class="wx" @click="xxx()"></i>
                        </span>
                    </div>
                    <h3 class="wh3">我们将发送验证码到您填写的手机号上，请注意查收</h3>
                    <div class="winput">
                        <div class="winput1">
                            <i></i>
                            <input type="text" placeholder="请输入手机号" @input="wphone(phone)" v-model="phone">
                            <em @click="xiao()"></em>
                        </div>
                        <div class="winput2">
                            <i></i>
                            <input type="text" placeholder="请输入手机验证码">
                            <a href="###" :class="{'wbian1':msg,'wbian2':!msg}" @click="wyan(phone)">获取验证码</a>
                        </div>
                    </div>
                    <div class="w-btn">
                        <span class="w-btn1" @click="again()">下一步</span>
                    </div>
                </div>
                <!-- 填写新密码 -->
                <div v-show="inta3">
                    <div class="wtitle" >
                        <span class="wtitc1">
                            <i class="back" @click="xxx1()"></i>忘记密码<i class="wx" @click="xxx1()"></i>
                        </span>
                    </div>
                    <h3 class="wh3y1"></h3>
                    <div class="winput">
                        <div class="winput1">
                            <strong class="yao"></strong>
                            <input type="password" placeholder="请输入新密码（6-32位）" @input="wphone(phone)" v-model="phone">
                            <em @click="xiao()"></em>
                        </div>
                        <div class="winput3" >
                            <strong class="yao"></strong>
                            <input type="text" placeholder="请确认密码">
                        </div>
                    </div>
                    <div class="w-btn">
                        <span class="w-btn1">确认</span>
                    </div>
                </div>
            </div>
            <!-- 注册 -->
           <div class="wtit" v-show="bol3">
               <div v-show="bol3">
                    <div class="wtitle" >
                        <span :class="ind3==1?'wtitc1':''" v-for="(v4,ind3) in arr5" :key="'ind4'+v4" @click="wBtn3(ind3)">{{v4}}</span>
                    </div>
                    <h3 class="wh3">我们将发送验证码到您填写的手机号上，请注意查收</h3>
                    <div class="winput">
                        <div class="winput1">
                            <i></i>
                            <input type="text" placeholder="请输入手机号" @input="wphone(ph1)"   v-model="ph1">
                            <em @click="xiao1()"></em>
                        </div>
                        <div class="winput2">
                            <i></i>
                            <input type="text" placeholder="请输入手机验证码" v-model="msg1">
                            <a href="###" :class="{'wbian1':msg,'wbian2':!msg}" @click="wyan(ph1)" >获取验证码</a>
                        </div>
                    </div>
                    <div class="w-btn">
                        <span class="w-btn1" @click="end()">取消</span>
                        <span class="w-btn2" @click="next(ph1,msg1)">下一步</span>
                    </div>
                </div>
            </div>

                <!-- 设置密码 -->
                <div v-show="bol">
                    <div class="wtitle" >
                        <span class="wtitc1">
                            <i class="back" @click="aa()"></i>设置登录密码<i class="wx"  @click="aa()"></i>
                        </span>
                    </div>
                    <h3 class="wh3y1"></h3>
                    <div class="winput">
                        <div class="winput1">
                            <strong class="yao"></strong>
                            <input type="password" placeholder="请输入密码（6-32位）"  v-model="pwd1">
                            <em></em>
                        </div>
                        <div class="winput3" >
                            <strong class="yao"></strong>
                            <input type="password" placeholder="请确认密码" v-model="pwd2">
                        </div>
                    </div>
                    <div class="w-btn" :plain="true" @click="oky(pwd1,pwd2)">
                        <span class="w-btn1">完成注册</span>
                    </div>
                </div>
            <!-- 信息填写 -->
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'Login',
    data() {
        return {
          ph1:'',
          msg1:'',
          pwd1:'',
          pwd2:'',
            boo:false,
            bol:false,
            bol1:false,
            bol2:false,
            bol3:false,
            inta1:true,
            inta2:false,
            inta3:false,
            a1:true,
            msg:true,
            fot:[],
            arr1:['待支付','待发货','待收货','交易完成'],
            arr3:['实名认证','收货地址','关注公众号','客服与反馈'],
            arr4:['注册','快速登录','密码登录'],
            arr5:['密码登录','注册','快速登录'],
            arr6:['注册','密码登录','快速登录'],
            ind:'',
            obj1:[
              {t:'2017/06/26',f:100,h:10}
            ],
            btnClass:['wtitc2','wtitc1'],
            phone:'',
            wImg:'',
        }
    },
    methods:{
      next(p,m){

        if(p.length!=11){
            alert('请输入正确的电话号码');
        }else{
            console.log(p);
            var reg=/^1[3456789]\d{9}$/;
            if(!(reg.test(p))){ 
            alert("手机号码有误，请重填");  
            return false; 
            }else{
            console.log('手机号码格式正确');
            if(this.msg1=='2222'){
                this.bol=!this.bol;
                this.bol3=false;
            }else{
              alert('2222');
            }
            }
        }
      },
      oky(v1,v2){
           console.log(v1);
            console.log(v2);
            if(v1!=v2){
              alert('密码不一致');
            }else{
              let obj={
                phone:this.ph1,
                pwd:this.pwd2
              }
              axios.post('/api/small/user/v1/register',obj).then(res=>{
              let msg=res.data.message;
              this.aa=msg;
              if(msg=='注册成功'){
                this.$message({
                  message: '注册成功',
                  type: 'success'
                });
                this.bol=!this.bol;
                this.bol3=false;
                this.end();


              }else{
                  this.$message.error(this.aa);
              }
          });


            }
      },
      aa(){
        this.bol=!this.bol;
        this.bol3=!this.bol;
      },
      xiao1(){
        this.ph1='';

      },
      // 登录
      log3(){
        
             let obj={
                phone:this.ph1,
                pwd:this.pwd2
              }
              axios.post('/api/small/user/v1/login',obj).then(res=>{
                  let msg=res.data.message;
                  this.aa=msg;
                  this.$store.state.headImg=res.data.result.headPic;
                  this.$store.state.mid=res.data.result.userId;
                  this.$store.state.msid=res.data.result.sessionId;
                  this.$store.state.name=res.data.result.nickName;
                  console.log(res.data);

                  if(msg=='登录成功'){
                    this.$message({
                      message: '登录成功',
                      type: 'success',
                    });
                    this.end();
                    this.$router.replace('/login');
                    
                    // this.$router.replace('/login?name='+'升仙'+'&img='+this.wImg);
                  }else{
                    this.$message.error(this.aa);
                    this.$router.replace('/login');
                  }
              });
              


      },
      // 回到首页
    gotolink(){
        //点击跳转至上次页面
        //this.$router.go(-1)
        //指定跳转地址
        this.$router.replace('/login');
    },
      // 取消号码
      xiao(){
          console.log(this.phone);
          this.phone='';
      },
      // 注册单独页面
      reg(){
        this.$router.replace('/register');
      },
      // 忘记密码
      inta(){
        this.inta1=false;
        this.inta2=true;
      },
      again(){
        this.inta2=false;
        this.inta3=true;
      },
      xxx(){
        this.inta1=!this.inta1;
        this.inta2=!this.inta2;
      },
       xxx1(){
        this.inta2=!this.inta2;
        this.inta3=!this.inta3;
      },
      // 取消
      end(){
        this.boo=!this.boo;
        this.bol1=false,
        this.bol3=false;
        this.bol2=false;
      },
      // 头部处理
        wBtn1(v){
          console.log(v);
          if(v == 0){
              this.bol1=false,
              this.bol3=true;
              this.bol2=false;
            }if(v==2){
              this.bol1=false,
              this.bol3=false;
              this.bol2=true;
            }
        },
        wBtn2(v){
            console.log(v);
            if(v == 0){
              this.bol1=false,
              this.bol2=false;
              this.bol3=true;
            }if(v==2){
              this.bol1=true,
              this.bol2=false;
              this.bol3=false;
            }
        },
         wBtn3(v){
            console.log(v);
            if(v == 0){
              this.bol1=false,
              this.bol2=true;
              this.bol3=false;
            }if(v==2){
              this.bol1=true,
              this.bol2=false;
              this.bol3=false;
            }
        },
        wlogin(){
          this.boo=!this.boo;
          this.bol1=!this.bol1;

        },
        wphone(){
          this.msg=false;
          
        },
        wyan(p){
        if(p.length!=11){
            alert('请输入正确的电话号码');
        }else{
            console.log(p);
            var reg=/^1[3456789]\d{9}$/;
            if(!(reg.test(p))){ 
            alert("手机号码有误，请重填");  
            return false; 
            }else{
            console.log('手机号码格式正确');
            }
        }
        }
    }
    
}
</script>

<style scoped>

/* 遮罩1 */
.wZhezhao,.wZhe{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.wZhezhao{
    background-color: rgba(0,0,0,0.3);
    z-index: 1;
}
/* 遮罩3 */
.wZhe{
    background-color: rgba(0,0,0,0.3);
    z-index: 2;
}

.wbox{
    z-index: 3;
    position: absolute;
    bottom: 28.3rem;
    width: calc(100% - 4rem);
    margin: 0 2rem;
    background-color: #fff;
    height: 38rem;
    border-radius: 0.9rem;
    border-top: 1.9rem solid #e53e42;

}
.wtitle{
    display: flex;
    justify-content: space-around;
    font-size: 2.4rem;
    color: #4c4c4c;
    height: 6rem;
    line-height: 6rem;
    border-bottom: 0.1rem solid #cccccc;
}
.wtitle span{
    flex: 1;
    position: relative;
    /* outline: 0.1rem solid #00f; */
}
.wtitc1{
    font-size: 3rem;
    color: #333333;  
}
.wtitc1 i{
    position: absolute;

}
.back{
    height: 3rem;
    width: 3rem;
    left: 2rem;
    top: 50%;
    transform: translateY(-1.5rem);
    background: url(../../assets/user/user-hui.png) no-repeat 0 0 ;
}
.wx{
    height: 2.4rem;
    width: 2.4rem;
    right: 2rem;
    top: 50%;
    transform: translateY(-1.2rem);
    background: url(../../assets/user/w-end.png) no-repeat 0 0 ;

}
/* .wtitc2{
    font-size: 2.4rem;
    color: #4c4c4c;
} */
/* 登录框 */
/* main */
.wh3{
  margin-top: 0.7rem;
  font-size: 1.8rem;
  color: #808080;
  text-align: center;
  line-height: 6.4rem;
  font-weight: normal;
}
.wh3y{
    height: 2.9rem;
}
.wh3y1{
    height: 5rem;
}
/* 忘记密码 */
.w-int{
    height: 2.4rem;
    width: 100%;
    text-align: right;
}
.w-inta{
    color: #e53e42;
    font-size: 1.8rem;
    line-height: 2.3rem;
}
.winput{
  /* height: 6rem; */
  width: calc(100% - 8rem);
  padding: 0 4rem;
  /* border-bottom: 0.1rem solid #ccc; */

}
.winput>div{
   width: 100%;
  height: 5.8rem;
  position: relative;
  margin-bottom: 2rem;
}
.winput1 em{
    height: 2.4rem;
    width: 2.4rem;
    position: absolute;
    top: 50%;
    right: 3.7rem;
    transform: translateY(-1.2rem);
    background: url(../../assets/user/user-x.png) no-repeat 0 0;
    z-index: 4;
}
.winput1 .yao,.winput3 .yao{
    position: absolute;
    top: 50%;
    left: 3.6rem;
    transform: translateY(-1.6rem);
    height: 3.2rem;
    width: 4.2rem;
    border-right: 0.1rem solid #ccc; 
    background: url(../../assets/user/user-pwd.png) no-repeat 0 0;
}
.winput1 i,.winput3 i,.winput2 i{
position: absolute;
top: 50%;
left: 3.6rem;
transform: translateY(-1.5rem);
height: 3rem;
width: 4.2rem;
border-right: 0.1rem solid #ccc;
}
.winput1 i{
background: url(../../assets/user/user-name.png) no-repeat 0 0;

}
.winput2 i{
background: url(../../assets/user/user-code.png) no-repeat 0 0;
z-index: 1;
}
.winput3 i{
background: url(../../assets/user/user-yao.png) no-repeat 0 0;

}
.winput1 input,.winput3 input{
  width:calc(100% - 9rem);
  height: 100%;
  border: 0.1rem solid #ccc;
  border-radius: 6rem;
  background-color: #fff;
  font-size: 2.4rem;
  padding-left: 9rem;
}
.winput2 input{
  position: absolute;
  left: 0;
  width:calc(100% - 31rem);
  height: 100%;
  border: 0.1rem solid #ccc;
  border-radius: 6rem;
  background-color: #fff;
  font-size: 2.4rem;
  padding-left: 9rem;
}

.winput2 a{
text-decoration: none;
display: inline-block;
height: 5.8rem;
line-height: 5.8rem;
text-align: center;
width: 20rem;
border-radius: 6rem;
position: absolute;
right: 0;
top: 0;
background-color: #fff;
font-size: 2.4rem;

}
.wbian1{
border: 0.1rem solid #ccc;
color: #808080;
}
.wbian2{
  color: #4c4c4c;
  border:0.1rem solid #4c4c4c;
}

/* 登录 */
.w-btn{
    border-top: 0.1rem solid #cccccc;
    display: flex;
    width: calc(100% - 4rem);
    padding: 0 2rem;
    height: 8rem;
    line-height: 8rem;
    text-align: center;
    font-size: 2.4rem;
    position: absolute;
    bottom: 0;
}
.w-btn span{
    flex: 1;
}
.w-btn .w-btn1{
    border-right: 0.1rem solid #cccccc;
    color: #4c4c4c;
}
.w-btn .w-btn2{
    color: #e53e42;
}
/* 遮罩2 */
/* .wly{
display: none;
} */
/* 弹框登录 */

.wTanLogin{
  background-color: #fff;
  height: 27rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 999;
  padding-top:9rem;

}
.wTanLogin i{
    position: absolute;
    right: 2.4rem;
    top: 1.8rem;
    height: 2.4rem;
    width: 2.4rem;
    background: url(../../assets/user/w-end.png) no-repeat 0 0;
}
.wTanLogin div{
  width: calc(100% - 12rem);
  margin: 0 6rem;
  height: 5.8rem;
  position: relative;
  margin-top: 2rem;
  border-radius: 6rem;
  font-size: 2.4rem;
  line-height: 5.8rem;
}

.wTanLogin div:nth-of-type(2){
  color: #4c4c4c;
  border: 0.1rem solid #4d4d4d;
  background-color: #fff;
  
}
.wTanLogin div:nth-of-type(1){
  color: #ffffff;
  border: 0.1rem solid #e53e42;
  background-color: #e53e42;
}
/*  */
.w-hui{
    background-color: #ccc;
}
/* ==5 */

.w-rzheng ul{
display: flex;
justify-content: space-around;
color: #4c4c4c;
font-size: 2.4rem;
text-align: center;
height: 12rem;
background-color: #fff;

}
.w-rzheng ul li {
  flex: 1;
}

.w-rzheng{
  padding-bottom: 23rem;

}
.w-rzheng ul {
  background-color: #ccc;
}
.w-rzheng ul li {
  padding-top:2.2rem ;
  font-size: 0;
  background-color: #fff;

}
.w-rzheng ul li div{
  font-size: 2.4rem;
}
.w-rzheng ul li span{
  display: inline-block;
  height: 4.2rem;
  width: 4.4rem;
}
.w-rzheng ul li:nth-child(1) span{
  background: url(../../assets/user/true-name.png) no-repeat -5.4rem 0.5rem ;
}
.w-rzheng ul li:nth-child(2) span{
  background: url(../../assets/user/true-name.png) no-repeat -10.4rem 0 ;
}
.w-rzheng ul li:nth-child(3) span{
  background: url(../../assets/user/true-name.png) no-repeat -15.8rem 0.1rem ;
}
.w-rzheng ul li:nth-child(4) span{
  background: url(../../assets/user/true-name.png) no-repeat -21.4rem 0.4rem ;
}
/* ==4 */
.w-mxin ul{
border-bottom: 2rem solid #f2f2f2;
}
.w-mxin ul li{
border-bottom: 0.1rem solid #cccccc;
color:#666;
font-size: 2.4rem;
height: 8rem;
line-height: 8rem;
display: flex;
  background-color: #fff;

/* justify-content:space-around; */
}
.w-mxin ul li span{
  flex: 1;
}
/* ==3 */
.w-dfh{
  height: 9.9rem;
  text-align: center;
  overflow: hidden;
  border-bottom: 2rem solid #f2f2f2;
}
.w-dfh ul{
  height: 9.9rem;
  display: flex;
  justify-content: space-around;
  color: #4c4c4c;
  font-size: 0;
  background-color: #fff;
}
.w-dfh ul li span{
  display: inline-block;
  width: 100%;
  font-size: 2.4rem;
}
.w-dfh ul li i{
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  display:inline-block;
  height: 3.2rem;
  width: 3.4rem;
}
.w-dfh ul li:nth-child(1) i{
  background: url(../../assets/user/user-huo1.png) no-repeat 0.1rem 0.2rem;
}
.w-dfh ul li:nth-child(2) i{
  background: url(../../assets/user/user-huo2.png) no-repeat 0 0;
}
.w-dfh ul li:nth-child(3) i{
  background: url(../../assets/user/user-huo3.png) no-repeat 0.1rem 0.2rem;
}
.w-dfh ul li:nth-child(4) i{
  background: url(../../assets/user/user-huo4.png) no-repeat 0.3rem 0.2rem;
}
/* ==2 */
.w-ding{
  height: 8rem;
  line-height: 8rem;
  background-color: #fff;
  width: calc(100% - 4rem);
  padding: 0 2rem;
  border-bottom: 0.1rem solid #cccccc;
}
.w-ding div:nth-child(1){
  float: left;
  font-size: 3rem;
  color: #4c4c4c;
  text-align: left;
}
.w-ding div:nth-child(2){
  float: right;
  font-size: 2.4rem;
  color: #666666;
  text-align: right;
}
/* ==1 */
.w-m{
  width: 100%;
  background-color: #f2f2f2;
}
.w-main{
  background-color: #fee3e3;
}
.w-maintop{
  width: calc(100% - 4rem);
  padding: 0 2rem;
  height: 33.6rem;
  position: relative;
}
.w-maintop .w-img{
  position: absolute;
  bottom: 9.4rem;
  height: 10rem;  
}
.w-maintop .w-img span{
  position: absolute;
  top: 0;
}
.w-maintop .w-img span:nth-of-type(1){
  left: 0;
  height: 10rem;
  width: 10rem;
  border-radius: 100%;
  background-color: #e38e8e;
}
.w-maintop .w-img span:nth-of-type(2){
  left: 12rem;
  height: 10rem;
  line-height: 10rem;
  width: 14rem;
  border-radius: 100%;
  font-size: 3rem;
  color: #4c4c4c;
  text-align: left;
}
.w-maintop .with{
position: absolute;
bottom: 3.8rem;
right: 2.4rem;
height: 4rem;
width: 14rem;
border-radius: 4rem;
background-color: #d26060;
font-size: 2.4rem;
color: #fff;
line-height: 4rem;
text-align: center;

}

/* 头部 */
.w-header{
  background-color: #e53e42;
  width: 100%;
  height: 9.6rem;
  color: #fff;
  font-size: 3rem;
  /* padding-top: 0.8rem; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.w-xhead{
  height:9.6rem;
  width:calc(100% - 4rem) ;
  padding: 0 2rem;
  /* outline: 0.2rem solid #ffffff; */
  line-height: 9.6rem;
  position: relative;
}
.w-xhead i{
  height: 3.6rem;
  width: 3.6rem;
  /* outline: 0.2rem solid #ffffff; */
  position: absolute;
  top: 50%;
  transform: translatey(-1.8rem);
}
.w-xhead i:nth-of-type(1){
  /* float: left; */
  left: 2rem;
  background: url(../../assets/user/top-email.png) no-repeat 0 0;
}
.w-xhead i:nth-of-type(2){
  /* float: right; */
  right: 2rem;
  background: url(../../assets/user/top-shezhi.png) no-repeat 0 0;
}
.w-xhead i:nth-of-type(3){
  /* float: right; */
  right: 6.8rem;
  background: url(../../assets/user/top-msg.png) no-repeat 0 0;
}
/* 头部 */
/* 底部 */
.w-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9.6rem;
  background-color: #fff;
  z-index: -1;
}
.w-xfoot{
  border-top: 0.1rem solid #e6e6e6;
  height: 9.6rem;
  overflow: hidden;
}
.w-xfoot ul{
  display: flex;
  height: 9.6rem;
}
.w-xfoot ul li{
  flex: 1;
  font-size:2rem;
  color: #666;
  text-align: center;

}
.w-xfoot ul li.w-red{
  color: #e83d41;
}
.w-xfoot ul li{
  position: relative;
  overflow: hidden;
}
.w-xfoot ul li span{
  display: inline-block;
  width: 100%;
  margin-top:-0.8rem ;
  
}
.w-xfoot ul li i{
  margin-top: 1.2rem;
  display: inline-block;
  height: 5rem;
  width: 5rem;
  /* outline: 0.1rem solid #00f; */
}
/* list1 */
.w-xfoot ul .w-list1:nth-child(1) i{
  background: url(../../assets/user/bottom1.png) no-repeat -5.5rem 0;
}
.w-xfoot ul .w-list1:nth-child(2) i{
  background: url(../../assets/user/bottom2.png) no-repeat -5.5rem 0;
}
.w-xfoot ul li:nth-child(3) em{
  margin-top: 1.5rem;
  display: inline-block;
  height: 5.5rem;
  width: 11.3rem;
  background: url(../../assets/user/bottom3.png) no-repeat 0 0;
}
.w-xfoot ul .w-list1:nth-child(4) i{
  margin-left: -0.8rem;  
  background: url(../../assets/user/bottom4.png) no-repeat -5.4rem 0;
}
.w-xfoot ul .w-list1:nth-child(5) i{
  background: url(../../assets/user/bottom5.png) no-repeat -5.6rem 0;
}
/* list2 */
.w-xfoot ul .w-list2:nth-child(1) i{
  background: url(../../assets/user/bottom1.png) no-repeat 0 0;
}
.w-xfoot ul .w-list2:nth-child(2) i{
  background: url(../../assets/user/bottom2.png) no-repeat 0 0;
}
.w-xfoot ul .w-list2:nth-child(4) i{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat 0 0;
}
.w-xfoot ul .w-list2:nth-child(5) i{
  background: url(../../assets/user/bottom5.png) no-repeat 0.2rem 0;
}
/* 底部 */
/* 清浮动 */
.clearfix::after{
  content: '';
  height: 0;
  visibility: hidden;
  clear: both;
  display: block;
  }
  .clearfix{
    *zoom: 1;
  }
</style>